<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				background-color: #FF0000;
				margin-bottom: 20px;
				padding: 40px;
				text-align: end;
			}
			
			/*修改placeholder的默认颜色：*/
			input::-webkit-input-placeholder{
			  color: red;
			}
			input::-moz-placeholder{   /* Mozilla Firefox 19+ */
			  color:blue;
			}
			input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
			  color:blue;
			}
			input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
			  color:yellow;
			}
			body {
				margin: 0px;
			}
			
			/*
				在编程界中有九中方位
				如何让图片占满？
			*/
			#d4 {
				background-image: url(../img/a.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		补充：浏览内核
			firefox：moz
			chrome：webkit
			ie：ie内核
		div
		padding：内边距，影响内容与边框线的距离
			-left:左
			-right：右
			-top：顶部
			-bottom：底部
			padding: 40px;上下左右都有40px内边距
		margin：外边距，影响盒子与另一盒子的距离
		如何修改内容的高度呢？
			line-height：可以修改内容的高度
			放大字体大小
		盒子的高度
			盒子模型总尺寸=border-width+padding+margin+内容宽度

		<div style="padding-left: 20px;font-size: 40px;">
			div的内容
		</div>
		<div style="padding-left: 20px;border-top-width: 0px;border-top-color: black;border-style: solid;">
			div的内容
		</div>
		<p>底部文字</p>
		有一些属性属于某些浏览器特有，比如placeholder的颜色修改
		
		<input type="text" placeholder="提示的内容" />
		
		<div style="width: 800px; height: 200px;line-height: 20px;display: inline;">
			宽度200，高度100
			内联元素的宽度和高度由padding+margin+border及内容
		</div>
		<div style="width: 300px; height: 200px;line-height: 20px;">
			宽度200，高度100
			块级元素的width和height会有效果
		</div>
		margin：水平居中效果
		<div>
			<span>span</span>
		</div>
		<div>
			没有标签
		</div>
		<div style="width: 200px; margin: 0 auto;">
			<p>span</p>
		</div>
		<h1>我是最大的标题</h1>
		
		<div id="d4" style="display: none;">
			
		</div>
	</body>
</html>
